<template>
  <div class="">
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 数据统计表格 -->
      <el-row>
         <el-table :data="dataList" style="width: 100%" empty-text="-">
          <el-table-column type="index"></el-table-column>
          <el-table-column prop="productName" label="商品名称"></el-table-column>
          <el-table-column  prop="buyerName" label="买家名称"></el-table-column>
          <el-table-column  prop="buyerAddress" label="买家地址"></el-table-column>
          <el-table-column  prop="orderStates" label="订单状态">
             <template v-slot="scope">
              <div :class="changeColor(scope.row.orderStates)">
                {{scope.row.orderStates | filteStates}}
              </div>
            </template>
          </el-table-column>
          <el-table-column  prop="dealPrice" label="成交价格">
            <template v-slot="scope">
              {{scope.row.dealPrice | filterMoney}}
            </template>
          </el-table-column>
          <el-table-column prop="dealDate" label="成交日期"></el-table-column>
          <el-table-column prop="remarks" label="备注">
            <template v-slot="scope" >
              <div @click="showremarkDialog(scope.row.remarks,scope.row.id)">{{scope.row.remarks}}</div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <!-- 分页区域 -->
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum" :page-sizes="[1, 2, 5, 7]" 
      :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
    <!-- 修改备注的弹框 -->
    <el-dialog  title="修改备注" :visible.sync="remarkDialogVisible" width="30%" @close="remarkDialogClose">
      <el-input type="textarea" :rows="4" placeholder="请输入备注内容"
        v-model="remarkMsg" ref="remarkRef">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeRemarkDialog">确 定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    filters : {
        filterMoney (data){
          if (data) return data + "元"
        },
        filteStates (data){
          let showStates = "";
          if(data == 0) showStates = "未售出"
          if(data == 1) showStates = "已售出,还未完成"
          if(data == 2) showStates = "已完成"
          return showStates;
        }
    },
   data (){
     return {
       //查询条件
       queryInfo : {
         type : 3,
         pagenum : 1,
         pagesize : 2
       },
       //备注弹框的展示与隐藏
       remarkDialogVisible : false,
       //当前修改的备注部分的内容
       remarkMsg : "",
       //当前修改的备注的id
       remarkId : "",
       //数据列表
       dataList : [
         {
           "id" : 1,
           "productName" : "佛像",
           "buyerName" : "吕佳佳",
           "buyerAddress" : "广东省深圳市龙华区",
           "orderStates" : "2", //订单状态 0~未售出  1~已售出,还未完成 2~已完成
           "dealPrice" : "100",
           "dealDate" : "2018-5-13",
           "remarks" : "11111"
         },
         {
           "id" : 2,
           "productName" : "蝉",
           "buyerName" : "狗子驴",
           "buyerAddress" : "广东省深圳市龙华区",
           "orderStates" : "1", //订单状态 0~未售出  1~已售出,还未完成 2~已完成
           "dealPrice" : "",
           "dealDate" : ""
         },
         {
           "id" : 3,
           "productName" : "佛像2",
           "buyerName" : "吕佳",
           "buyerAddress" : "广东省深圳市龙华区",
           "orderStates" : "2", //订单状态 0~未售出  1~已售出,还未完成 2~已完成
           "dealPrice" : "100",
           "dealDate" : "2018-5-13",
           "remarks" : "11111"
         },
         {
           "id" : 4,
           "productName" : "蝉2",
           "buyerName" : "狗驴",
           "buyerAddress" : "广东省深圳市龙华区",
           "orderStates" : "1", //订单状态 0~未售出  1~已售出,还未完成 2~已完成
           "dealPrice" : "",
           "dealDate" : ""
         }
       ],
       //总数据
       total : 4
     }
   },
   created(){
     this.getCateList();
   },
   methods : {
     //请求商品表格数据
    async getCateList(){
      // const {data : res} = await this.$http.get('aaa' , {params:this.queryInfo})
      // if(res.meta.status !== 200){
      //   return this.$msg.error("获取商品表格失败");
      //   //把数据列表赋值给catelist
      //   this.catelist = res.data.result
      //   this.total = res.data.total
      // }
    },
    //打开备注弹框
    showremarkDialog (msg,id){
      this.remarkDialogVisible = true;
      if(msg){
        this.remarkMsg = msg;
      }else{
        this.remarkMsg = "";
      }
      this.remarkId = id;
      console.log("id",this.remarkId)
    },
    //备注弹框的关闭
    remarkDialogClose (){
      this.remarkMsg = "";
    },
    //备注弹框的确定按钮
    async changeRemarkDialog (){
      // const {data : res} = this.$http.post("remark", {remarkMsg : this.remarkMsg})
      // if(res.msg !== 200){
      //   this.$msg.error("修改备注失败")
      // }
      this.$msg.success("修改备注成功")
      this.remarkDialogVisible = false;
      this.getCateList();
    },
    //pagesize改变
    handleSizeChange (newSize){
      this.queryInfo.pagesize = newSize
      this.getCateList();
    },
    //页面改变
    handleCurrentChange (newpage){
     this.queryInfo.pagenum = newpage 
     this.getCateList();
    },
    changeColor (orderStates){
       let stateClass = "";
      if(orderStates == 0) stateClass = ""
      if(orderStates == 1) stateClass = "green"
      if(orderStates == 2) stateClass = "yellow"
      return stateClass;
    }
   }
  }
</script>

<style lang="less" scoped>
.el-breadcrumb{
  line-height: 30px;
}
.cell div.green{
  color: green;
}
.cell div.yellow{
  color: yellow;
}
</style>
